<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="css/newproduct.css"/>
	</head>
	<body>
		<div id="box">
			<header class="header-top">
				<div class="top-middle">
					 <h2>新品上市</h2>
					 <button class="car-shop"><i class="iconfont">&#xe61b;</i></button>
				</div>
			   <div class="group-list">
			   	  <ul class="list-pic">
			   	  </ul>
			   </div>
			</header>
			<section class="content">
			 
			</section>
			<footer class="foot">
				<div class="home-page common-page">
					<strong class="active"></strong>
					<a href="#">
						<i class="iconfont">&#xe644;</i>
						<span>首页</span>
					</a>
				</div>
				<div class="classify common-page">
					<a href="#">
						<i class="iconfont">&#xe692;</i>
						<span>分类</span>
					</a>
				</div>
				<div class="shop-car common-page">
					<a href="#">
						<i class="iconfont">&#xe61b;</i>
						<span>购物车</span>
					</a>
				</div>
				<div class="home-show common-page">
					<a href="#">
						<i class="iconfont">&#xe646;</i>
						<span>我的秀</span>
					</a>
				</div>
				<div class="more common-page">
					<a href="#">
						<i class="iconfont">&#xe69a;</i>
						<span>更多</span>
					</a>
				</div>
			</footer>
		</div>
		
	</body>
	<script type="text/javascript" src="js/jquery-2.0.3.js"></script>
	<script type="text/javascript" src="js/shopcar.js"></script>
	<script type="text/javascript">
	
	$(function(){
		$.ajax({
			type:'GET',
			url:'http://datainfo.duapp.com/shopdata/getclass.php',
			dataType:'json',
			success:function(data){
				console.log(data)
			    $.each(data,function(index){
			    	var aLi=$('<li><p></p></li>')
			    	var oI=$('<i class="iconfont icon">'+data[index].icon+'</i>')
			    	aLi.append(oI)
			    	$(".list-pic").append(aLi)
			     $(".list-pic li").children("i").eq(0).addClass("activ")
			      $(".list-pic li p").eq(0).addClass("arrow")
				$(".list-pic li").on("click",function(){
					$(this).children("i").addClass("activ")
					$(this).siblings().children().removeClass("activ")
					$(this).children("p").addClass("arrow")
					$(this).siblings().children("p").removeClass("arrow")
					get(data[$(this).index()].classID)
				})
				
			    })
			}
		})
		get(1)
	    function get(i){
	    	$.ajax({
	     	type:'GET',
			url:'http://datainfo.duapp.com/shopdata/getGoods.php',
			dataType:'jsonp',
			data:{classID:i},
			success:function(data){
				$(".content").html("")
				$.each(data,function(index){
					var oImg=$('<a href="detail.html"><img src="'+data[index].goodsListImg+'"></a>');
					var oDiv1=$('<div class="imgname">'+data[index].goodsName+'</div>')
					var oDiv2=$("<div><span class='real-price'>￥"+data[index].price+"</span><span class='discount'>"+data[index].discount+"折</span></div>")
					var  oDiv=$("<div class='common-style'></div>")
					oDiv.append(oImg)
					oDiv.append(oDiv1)
					oDiv.append(oDiv2)
					$(".content").append(oDiv)
					oImg.on("click",function(){
						sessionStorage.setItem("goodsID",data[index].goodsID)
					})
				})
			}
	     })
	    }
	     
		function bodyScale(){
				var devicewidth=document.documentElement.clientWidth;
				var scale=devicewidth/640;
				document.body.style.zoom=scale;
			}
			window.onresize=window.onload=function(){
				bodyScale();
			}
	})
		
	</script>
</html>
